<template>
  <el-menu default-active="0" class="el-menu-vertical-demo" @select="handleSelect">
    <el-menu-item index="0">
      <span>机器人设置</span>
    </el-menu-item>
    <el-menu-item index="1">
      <span>企业知识库</span>
    </el-menu-item>
    <!-- <el-sub-menu index="2">
      <template #title>
        <span>数据统计</span>
      </template>
      <el-menu-item index="3">对话统计</el-menu-item>
      <el-menu-item index="4">问题统计</el-menu-item>
    </el-sub-menu> -->
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from "vue";
import emitter from "@/utils/mitt-bus";

const emit = defineEmits(["onActive"]);

const tree = ref([
  {
    name: "robotSettings",
    title: "机器人设置",
    icon: "Eleme",
    value: "0",
  },
  {
    name: "IceCreamRound",
    title: "企业知识库",
    icon: "ForkSpoon",
    value: "1",
  },
  {
    name: "common",
    meta: {
      title: "数据统计",
      icon: "Setting",
    },
    children: [
      {
        name: "IceCreamRound",
        title: "对话统计",
        icon: "ForkSpoon",
        value: "2",
      },
      {
        name: "IceCreamRound",
        title: "问题统计",
        icon: "ForkSpoon",
        value: "3",
      },
    ],
  },
]);

const active = ref("ForkSpoon");

function handleSelect(index, indexPath, item) {
  active.value = index;
  console.log(index);
  emit("onActive", index);
}

function handleOpen(key, keyPath) {
  // console.log(key, keyPath);
}

function handleClose(key, keyPath) {
  // console.log(key, keyPath);
}

function level(item) {
  return !item.children || item.children.length === 0;
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.icon {
  height: 35px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  padding-left: 5px;
}
.selectd {
  background-color: #f5f5f5;
  color: rgb(114, 184, 249);
  .el-icon {
    color: rgb(114, 184, 249);
  }
}

.el-menu-vertical-demo {
  border: 0;
}
</style>
